<template>
  <el-row class="template-com" v-show="isShow">
    <el-collapse
      class="template-com__collapse"
      v-model="activeNames"
      @change="handleChange"
    >
      <el-collapse-item
        class="template-com__collapse-item"
        :name="item.id"
        v-for="item in list"
      >
        <template slot="title">
          <span class="template-com__collapse-item__title">{{
            item.title
          }}</span>
          <span>
            ( {{ item.text }} )
          </span>
        </template>
        <div
          class="template-com__collapse-item__context"
          @click="changeText(context)"
          v-for="(context, index) in item.ex"
          :key="`${item.val}_text_${index}`"
        >
          {{ index + 1 }}. {{ context }}
        </div>
      </el-collapse-item>
    </el-collapse>
  </el-row>
</template>

<script>
export default {
  name: "TemplateCom",
  props: {
    list: Array,
    isShow: Boolean,
  },
  data() {
    return {
      activeNames: "",
    };
  },
  methods: {
    handleChange() {
      console.log(val);
    },
    changeText(text) {
      this.$emit("changeText", text);
    },
  },
};
</script>

<style lang="scss" scoped>
.template-com {
  width: 80%;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
  margin-left: 10%;
  text-align: center;
  &__collapse {
    &-item {
      &__title {
      }
      &__btn {
        position: absolute;
        right: 20px;
      }
      &__context {
        text-align: left;
        cursor: pointer;
        &:hover {
          color: green;
        }
      }
    }
  }
}
</style>
